
<template>
    <CommonPage class="pt-content-menu hp100 a-sum">
      <template slot="top">
        <div class="class-title-wrap" style="min-width: 700px;">
          <div class="class-title" style="margin-right: 20px;">
            <div class="class-title-all" :class="{'active':active===99}" @click="clickClassText(99)">科研数据</div>
          </div>
          <div class="class-title" v-for="(tab,idx) in tablist" :key="idx" style="margin-right: 20px;">
            <div class="class-title-all" :class="{'active':active===idx}" @click="clickClassText(idx)">{{tab}}</div>
          </div>
        </div>
      </template>
      <template slot="content">
        <slot name="content">
          <div class="asum-container" v-if="active===0">
            <div class="left">
              <div class="l-top">
                <div class="sum-card1 cbg">
                  <imgline-achieve :list="data1" title="学术专利" @gomore="clickClassText(3)" :query="query[0]"></imgline-achieve>
                </div>
                <div class="sum-card1 cbg">
                  <imgline-achieve :list="data2" title="软件著作" @gomore="clickClassText(6)" :query="query[1]"></imgline-achieve>
                </div>
                <div class="sum-card1 cbg">
                  <imgline-achieve :list="data3" title="获奖成果" @gomore="clickClassText(5)" :query="query[2]"></imgline-achieve>
                </div>
              </div>
              <div class="l-bottom cbg">
                <div class="item-content">
                  <Timeline style=" height: 100%;">
                    <TimelineItem style=" height: 100%;">
                      <template #dot><Icon type="ios-radio-button-on" color="var(--first-menu-active-color)" /></template>
                      <scrollboard style=" height: 100%;" :list="data4" title="鉴定成果" :head="head4" :column="hcolum4" :query="query[3]"></scrollboard>
                    </TimelineItem>
                  </Timeline>
                </div>
                <div class="item-content">
                  <Timeline style=" height: 100%;">
                    <TimelineItem style=" height: 100%;">
                      <template #dot><Icon type="ios-radio-button-on" color="var(--first-menu-active-color)" /></template>
                      <scrollboard style=" height: 100%;" :list="data5" title="学术著作" :head="head5" :column="hcolum5" :query="query[4]"></scrollboard>
                    </TimelineItem>
                  </Timeline>
                </div>
              </div>
            </div>
            
            <div class="right cbg ky-right">
              <div class="ky-l-title">论文发表情况</div>
              <Timeline style="height: calc(100% - 0px)">
                <TimelineItem>
                  <template #dot><Icon type="ios-radio-button-on" color="var(--first-menu-active-color)" /></template>
                  <div class="hylw-pannel">
                    <scrollboard :list="data6" title="会议论文" :head="head67" :column="hcolum67" :query="query[5]"></scrollboard>
                  </div>
                </TimelineItem>
                <TimelineItem>
                  <template #dot><Icon type="ios-radio-button-on" color="var(--first-menu-active-color)" /></template>
                  <div class="hylw-pannel">
                  <scrollboard :list="data7" title="期刊论文" :head="head67" :column="hcolum67" :query="query[6]"></scrollboard>
                  </div>
                </TimelineItem>
                <TimelineItem>
                  <template #dot><Icon type="ios-radio-button-on" color="rgba(29,37,44,1)" /></template>
                  <span class="ky-gopage" @click="clickClassText()">查看全部<Icon type="ios-arrow-forward" :size="14"/></span>
                </TimelineItem>
              </Timeline>
            </div>
          </div>
          
          <template v-else>
            <adate-view ></adate-view>
          </template>
          
        </slot>
      </template>
    </CommonPage>
</template>

<script>

import adateView from "./adateView.vue";
import CommonPage from '@/components/common/page/page.vue'
import achieveEdit from "./achieveEdit.vue";
import {getList,getAGroupyear} from "../../../api/achievements";
import Scrollboard from "./scrollBoard.vue";
import imglineAchieve from "./imglineAchieve.vue";
import {dict2Label,clone,tablist} from "../achConfig";
export default {
  name: 'achievementsum',
  components:{Scrollboard, CommonPage,imglineAchieve,adateView},
  props:['tabs'],
  data() {
    return {
      // 学术论文 a1 学术著作 a2 学术专利 a3 鉴定成果 a4 获奖成果 a5 软件著作 a6
      tablist:tablist,
      active:this.$route.query.page===undefined?99:Number(this.$route.query.page),
      dimg:require('../certificate.png'),
      data1:[],
      data2:[],
      data3:[],
      data4:[],
      data5:[],
      data6:[],
      data7:[],

      head4: ['&nbsp;&nbsp;&nbsp;&nbsp;#','成果名称', '鉴定部门', '鉴定结论','鉴定时间'],
      hcolum4:['index', 'name', 'coontentCompany', 'level','time'],

      head5: ['&nbsp;&nbsp;&nbsp;&nbsp;#','著作名称', '著作类别', '出版单位','出版社级别'],
      hcolum5:['index', 'name', 'level', 'coontentCompany','level2'],

      head67: ['&nbsp;&nbsp;&nbsp;&nbsp;#','名称', '作者', '发表/刊物论文集','发表时间'],
      hcolum67:['index', 'name', 'author', 'coontentCompany','time'],
      query:[
        {type:3},
        {type:6},
        {type:5},
        {type:4},
        {type:2},
        {type:1,level:'会议论文'},
        {type:1,level:'期刊论文'}
      ]
    
    }
  },
  watch: {
    $route: { //路由修改后init 页面
      handler: function(route) {
        if(this.$route.query.page!==this.active) {
          this.init()
        }
        
      },
      deep: true
    }
  },
  

  mounted() {
    
    this.init()
  },

  methods: {
    init() {
      // 1. 获取当前的page 配置
      this.active = this.$route.query.page===undefined?99:Number(this.$route.query.page)

      
      this.getDatayear('data1',this.query[0])
      this.getDatayear('data2',this.query[1])
      this.getDatayear('data3',this.query[2])

      this.getData('data4',this.query[3]) 
      this.getData('data5',this.query[4])
      
      this.getData('data6',this.query[5])
      this.getData('data7',this.query[6])
    },
    formdata(value){
      if(!value) return ''
      const dateTime = new Date(value);
      const year = dateTime.getFullYear();
      const month = String(dateTime.getMonth() + 1).padStart(2, '0');
      const day = String(dateTime.getDate()).padStart(2, '0');

      const formattedDateTime = `${year}-${month}-${day}`;
      return formattedDateTime
    },
    getData(datekey,query){
      query = query||{}
      let params =   {
        pageIndex: 1,
        pageSize: 20,
        ...query
      }
      getList(params).then(res => {
        let data = res.data;
        if(data.code == 1) {
          let achieveData = data.data.items||[] 
          
          let list = achieveData.map(item=>{
            let author=''
            let authors = item.authors||[]
            authors.forEach((a,idx)=>{
              if(idx===0){
                author+=a.name
              }else {
                author+=','+a.name
              }
            })

            
            if(datekey==='data5'){
              item.level = dict2Label('zzlb',item.level)
              item.level2 = dict2Label('cbsjb',item.level2)
            }
   
            
            return {
              ...item,
              author:author,
              time:this.formdata(item.time)
              
            }
          })
          this[datekey] = list
        }
      })
    },

    getDatayear(datekey,query){
      query = query||{}
      let params =   {
        pageIndex: 1,
        pageSize: 20,
        ...query
      }
      getAGroupyear(params).then(res => {
        let data = res.data;
        if(data.code == 1) {
          let list =[]
          let achieveData = data.data
          for(let key in achieveData){
            let value = achieveData[key]||[]
            if(value.length>0){
              let v = value.map(item=>{
                if(item.imageUri){
                  let imageUri = JSON.parse(item.imageUri)
                  if(imageUri && imageUri.length>0){
                    let path = imageUri[0].path
                    item.imageUri = `/Learn${path}` // 直接写url
                  }else {
                    item.imageUri = this.dimg
                  }
                }
                return item
              })
      
              list.push({year:key,infos:v})
            }
          }
          
          this[datekey] = list
        }
      })
    },

    preview(file){
      //let fileId = file.id;
      let path = file.path;
      window.open(`/api/minio/filePreview?path=${path}`);

    },
    
    clickClassText(idx){
      let name = this.$route.name
      this.$router.push({name:name,query:{page:idx}})
    },
  }
}
</script>
<style scoped>

.class-title-wrap{
  display: flex;
  justify-content: flex-start;
  align-items: start;
}
.class-title{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.class-title-all{
  font-size: 16px;
  cursor: pointer;
  line-height: 34px;
}
.active{
  color: var(--defulat-color);
  font-size: 22px;
  font-weight: 600;
}
/deep/ .pt-content-top{
  align-items: start !important;
}
.query-item{
  width: 150px;
  text-align: left;
  border-radius: 10px;
}


/* 菜单页 */
/deep/.pt-content-menu {
  background: var(--default-bgcolor)!important;
 

  height:100%;
}
/deep/.pt-content-menu > .pt-content-top{
  padding:20px 20px 10px;
  background-color: var(--card-body-bgcolor);
  border-radius: 8px;
}


/deep/ .pt-content-wrap{
  margin-top: 0px;
}

.a-sum /deep/.pt-content-menu > .pt-content-wrap {
  padding:0 !important;
}

.asum-container{
  background: var(--default-bgcolor)!important;
  display: flex;
  min-height: 820px;
  height: calc(100vh - 100px);
  max-height: 1220px;
  overflow: hidden;
  justify-content: space-between;
}


.cbg{
  background-color: var(--card-body-bgcolor);
  border-radius: 8px;
  MARGIN-RIGHT: 10PX;
  margin-top: 10PX;
  padding: 20px;
}



.asum-container .right{
  width: 35%;
  background-color: var(--card-body-bgcolor);
  margin: 10px 0 0;
  height: calc(100% - 10px);
  
}
.asum-container .left{
  display: flex;
  width: 65%;
  height: 100%;
  flex-direction: column;
}
.asum-container .left .l-top{
  display: flex;
  flex-direction: row;
  height: 50%;
  flex-grow: 1;
  width: 100%;
}

.hylw-pannel{

}

.asum-container .left .l-bottom{
  display: flex;
  flex-direction: row;
  height: 45%;
  flex-grow: 1;
  margin-top: 20px;
  justify-content: space-between;
}
.asum-container .left .l-bottom .item-content{
  width: 48%;
}


.asum-container .left .l-top .sum-card1{
  width: 33%;
  height: 100%;
}

.ky-l-title{
  color: var(--default-color);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}
.ky-gopage{
  color: #468dff;
  cursor: pointer;
}
/deep/ .ivu-timeline-item-content{
  height: 96%;
}
.ky-right .ivu-timeline-item{
  height: calc(45% - 10px);
}
.hylw-pannel{
  height: 100%;
}
</style>